var multipleIcon = false;
var modificable = false;
var basicPath = "style/images/Mapas/";
var categoriaE = false;
var elementos = 0;
var typeMap = false;

var startX;
var startY;
var planoWidth;
var planoHeight;
var iconWidth;
var iconHeight;


$('.icon').live('dblclick',function(){
    if(!modificable){
        $('#msgPlano').html("Para modificar la ubicacion de algun elemento dirijase al modulo SHA.") ;
        return;
    }
    $(this).remove();
    $('#coordIcon').val("");
});
function loadPlanoExtintores(ed,ps,cat,modificable){
    loadPlano(ed,ps,"extintores");
    categoriaE = cat;
    basicPath = "style/images/Mapas/StmasExtincion/";
    setModificable(modificable);
}
function loadPlanoRiesgos(ed,ps){
    loadPlano(ed, ps,"riesgos");
    setModificable(true);
    setMultiple(true);
    basicPath = "style/images/Mapas/Riesgos/";
    typeMap = "Riesgos";
}

function loadPlano(ed,ps,type){
    $.ajax({
        type: "GET",
        url: "getPiso.do?edificio="+ed+"&piso="+ps,
        dataType: 'json',
        success: function (answer){
            edif = ed.replace(' ', '%20', 'gi');
            param = "edificio="+edif+"&piso="+ps+"&ruta="+answer.ruta_plano+"&tipo="+type;
            $('#mapPiso').load("Modulo2/plano.jsp?"+param).css('display', 'block');
        }
    });
}

function setMultiple(bool){
    multipleIcon=bool;
}

function setModificable(bool){
    modificable = bool;
}

function setCategoria(cat){
    categoriaE = cat;
}

function handleDialog(){
    id = $(this).attr('id');

    widget = $('#dialog_'+id);
    if(widget.dialog("isOpen")) {
        $('#dialog_'+id).dialog( "close" );
    }
    else {
        $('#dialog_'+id).dialog( "open" );
    //        myDialogX = $('#'+id).position().left;
    //        myDialogY = $('#'+id).position().top; // + $('#'+id).outerHeight();
    //        $("#dialog_"+id).dialog('option', 'position', [myDialogX, myDialogY]);
    }
}
    
function clickPlano(x,y){
    if(!modificable){
        $('#msgPlano').html("Para modificar la ubicaci&oacute;n de algun elemento debe modificar los datos del mismo en el modulo correspondiente.") ;
        return;
    }
    if (!categoriaE) {
        $('#msgPlano').html("Debe seleccionar un riesgo de la tabla de se&ntilde;alizaciones mostrada bajo el plano.") ;
        return;
    }
    $('#msgPlano').html("") ;
    var startX = document.getElementById("plano").offsetLeft;
    var startY = document.getElementById("plano").offsetTop;
    var iconWidth = $('#iconSample').width();
    var iconHeight = $('#iconSample').height();
    var planoWidth = $("#plano").width();
    var planoHeight = $("#plano").height();

    xpos = x - startX -(iconWidth/2);
    ypos = y - startY -(iconHeight/2);

    if(xpos < - iconWidth) return;
    if(xpos < 0 ) xpos = 0;
    if(ypos < 0 ) ypos = 0;
    if(xpos > planoWidth-iconWidth) xpos = planoWidth-iconWidth;
    if(ypos > planoHeight-iconHeight) ypos = planoHeight-iconHeight;

    if (!multipleIcon) $('.icon').remove();
    if(typeMap="Riesgos"){
        id  = "Riesgo_"+elementos;
        val = $("#coordenadas"+categoriaE).val();
        $("#coordenadas"+categoriaE).val(val + xpos+","+ypos+" ");
    }
    else id = categoriaE;
    setIcon(xpos, ypos, id, categoriaE);
    
    coord = xpos + ", " + ypos;
    $('#coordIcon').val(coord);
}

function setIcon(xpos,ypos,id, cat){
    style = "margin-top: "+ypos+"px; margin-left: "+xpos+"px; position: absolute;";
    $('#plano').append("<div id='actualIcon'><img src='"+basicPath+cat+".gif' style=\""+style+"\" title='"+cat+"'/></div>");
    $('#actualIcon').addClass('icon').addClass('pointer').attr('id', id);
    elementos++;
}

function setDialog(xpos,ypos,data){
    dialog = $("<div id='dialog_"+data.id_nro_bien+"' class='dialogIcon'>");
    dialog.append("<p><b>Nro. Bien: </b>"+data.id_nro_bien+"</p>");
    dialog.append("<p><b>Categoria: </b>"+data.categoria+"</p>");
    dialog.append("<p><b>Tipo: </b>"+data.tipo+"</p>");
    dialog.append("<p><b>Capacidad: </b>"+data.capacidad+"</p>");
    dialog.append("<p><b>Estado: </b>"+data.status+"</p>");
    dialog.append("<p><b>Referencia: </b>"+data.referencia+"</p>");
    $('#'+data.id_nro_bien).append(dialog);

    $("#dialog_"+data.id_nro_bien).dialog({
        autoOpen: false,
        width: 200,
        maxWidth: 200,
        stack: true,
        title: 'Equipo de Extincion',
        hide: "explode"
    });
}

function consultarExtintores(ed,ps){
    $.ajax({
        url: "consultarExtintores.do",
        data: {
            'edificio': ed,
            'piso': ps
        },
        type: "GET",
        dataType: 'json',
        success: function(data) {
            if(data.extintores != null) {
                mult = multipleIcon;
                modif = modificable;
                multipleIcon = true;
                modificable = true;
                $.each(data.extintores, function(i,item){
                    coord = item.coordenadas.split(',');
                    setIcon(coord[0], coord[1], item.id_nro_bien, item.categoria);
                    setDialog(coord[0], coord[1], item);
                });
                $('.icon').addClass('iconStored');
                $('.iconStored').click(handleDialog).removeClass('icon');
                multipleIcon = mult;
                modificable = modif;
            }
        }
    });
}
